<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    :onClose="closeDialog"
    width="80%"
    top="48px"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
    >
    <template #footer>
      <t-button :loading="btnLoading" theme="success" @click="onSubmit(0)">暂存</t-button>
      <t-tooltip content="提交后不可再编辑会进入审批流程">
        <t-button :loading="btnLoading" :disabled="isCommit"  theme="primary" @click="onSubmit(1)">提交</t-button>
      </t-tooltip>
    </template>
    <t-loading :text="formLoadingText" size="medium" :loading="formLoading" showOverlay>
      <template #indicator>
        <t-icon v-if="formLoadingText === '数据读取中...'" name="loading" slot="icon"/>
        <t-icon v-else name="error-circle-filled" slot="icon"/>
      </template>
      <t-form
        labelAlign="left"
        labelWidth="90px"
        :data="formData"
        ref="form"
        :colon="true"
        :rules="edit ? rules : {}"
      >
        <t-row>
          <t-form-item label="人员总数" name="ryzs">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.ryzs"  placeholder="请输入人员总数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.ryzs}} 人</span>
          </t-form-item>
          <t-form-item label="其中：固定人员" name="gdry" :label-width="130">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.gdry"  placeholder="请输入固定人员" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.gdry}} 人</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span class="front-title">固定人员中</span>
          <t-form-item label="45 岁及以下" name="sswjyx" :label-width="110">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.sswjyx"  placeholder="请输入45 岁及以下" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.sswjyx}} 人</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span class="front-title">固定人员中</span>
          <t-form-item label="博士学位" name="bsxw">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.bsxw"  placeholder="请输入博士学位人数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.bsxw}} 人</span>
          </t-form-item>
          <t-form-item label="硕士学位" name="ssxw">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.ssxw"  placeholder="请输入硕士学位人数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.ssxw}} 人</span>
          </t-form-item>
          <t-form-item label="学士学位" name="xsxw">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.xsxw"  placeholder="请输入学士学位人数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.xsxw}} 人</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span class="front-title">固定人员中</span>
          <t-form-item label="高级职称" name="gjzc">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.gjzc"  placeholder="请输入高级职称人数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.gjzc}} 人</span>
          </t-form-item>
          <t-form-item label="中级职称" name="zjzc">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.zjzc"  placeholder="请输入中级职称人数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.zjzc}} 人</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="实验室面积" name="sysmj" :label-width="100">
            <t-input-adornment v-if="edit" append="平方米">
              <t-input-number v-model="formData.sysmj"  placeholder="请输入实验室面积" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.sysmj}} 平方米</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span class="front-title">设备总量</span>
          <t-form-item label="数量" name="sbzlsl" :label-width="labelWidth">
            <t-input-adornment v-if="edit" append="台（套）">
              <t-input-number v-model="formData.sbzlsl"  placeholder="请输入设备总数量" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.sbzlsl}} 台（套）</span>
          </t-form-item>
          <t-form-item label="总值" name="sbzlzz" :label-width="labelWidth">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.sbzlzz"  placeholder="请输入设备总值" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.sbzlzz}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span class="front-title">其中：50 万元及以上设备</span>
          <t-form-item label="数量" name="wswjyssbsl" :label-width="labelWidth">
            <t-input-adornment v-if="edit" append="台（套）">
              <t-input-number v-model="formData.wswjyssbsl"  placeholder="请输入50万及以上设备总数量" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.wswjyssbsl}} 台（套）</span>
          </t-form-item>
          <t-form-item label="总值" name="wswjyssbzz" :label-width="labelWidth">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.wswjyssbzz"  placeholder="请输入50万及以上设备总值" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.wswjyssbzz}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span class="front-title">当年新增设备</span>
          <t-form-item label="数量" name="dnxzsbsl" :label-width="labelWidth">
            <t-input-adornment v-if="edit" append="台（套）">
              <t-input-number v-model="formData.dnxzsbsl"  placeholder="请输入当年新增设备总数量" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.dnxzsbsl}} 台（套）</span>
          </t-form-item>
          <t-form-item label="总值" name="dnxzsbzz" :label-width="labelWidth">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.dnxzsbzz"  placeholder="请输入当年新增设备总值" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.dnxzsbzz}} 万元</span>
          </t-form-item>
        </t-row>
      </t-form>
    </t-loading>
  </t-dialog>
</template>

<script>
export default {
  name: 'TabKeyLaboratoryForm',
  props: {
    edit: { type: Boolean, default: true },
    infoId: { type: Number, default: -1 }
  },
  data() {
    return {
      visible: true,
      btnLoading: false,
      formLoading: true,
      formLoadingText: '数据读取中...',
      header: '',
      formData: {
        ryzs: undefined,
        gdry: undefined,
        sswjyx: undefined,
        bsxw: undefined,
        ssxw: undefined,
        xsxw: undefined,
        gjzc: undefined,
        zjzc: undefined,
        sysmj: undefined,
        sbzlsl: undefined,
        sbzlzz: undefined,
        wswjyssbsl: undefined,
        wswjyssbzz: undefined,
        dnxzsbsl: undefined,
        dnxzsbzz: undefined,
        approveStatus: '1',
      },
      rules: {
        ryzs: [{ required: true, message: '人员总数不能为空' }],
        gdry: [{ required: true, message: '固定人员不能为空' }],
        sswjyx: [{ required: true, message: '45 岁及以下不能为空' }],
        bsxw: [{ required: true, message: '博士学位不能为空' }],
        ssxw: [{ required: true, message: '硕士学位不能为空' }],
        xsxw: [{ required: true, message: '学士学位不能为空' }],
        gjzc: [{ required: true, message: '高级职称不能为空' }],
        zjzc: [{ required: true, message: '中级职称不能为空' }],
        sysmj: [{ required: true, message: '实验室面积不能为空' }],
        sbzlsl: [{ required: true, message: '设备总量（数量）不能为空' }],
        sbzlzz: [{ required: true, message: '设备总量（总值）不能为空' }],
        wswjyssbsl: [{ required: true, message: '50 万元及以上设备（数量）不能为空' }],
        wswjyssbzz: [{ required: true, message: '50 万元及以上设备（总值）不能为空' }],
        dnxzsbsl: [{ required: true, message: '当年新增设备(数量)不能为空' }],
        dnxzsbzz: [{ required: true, message: '当年新增设备（总值）不能为空' }],
      },
    }
  },
  computed: {
    isCommit() {
      return this.formData.approveStatus !== '1'
    },
    labelWidth() {
      return '60px'
    }
  },
  created() {
    if (this.edit) {
      if (this.infoId === -1) {
        this.header = '添加信息记录'
        this.formLoading = false
      } else {
        this.header = '修改信息内容'
        this.getDetail()
      }
    } else if (this.infoId === -1) {
      this.header = '信息错误！！！'
      this.formLoadingText = '信息错误，请联系管理员'
    } else {
      this.header = '查看信息内容'
      this.getDetail()
    }
  },
  methods: {
    // 查看和修改时获取详情
    async getDetail() {
      try {
        const { data } = await this.$api.kjtjdc.table.labInfo.getInfoById(this.infoId);
        this.formData = data;
        this.formLoading = false
      } catch (e) {
        this.formLoadingText = e
        this.$message.error('数据获取失败，请稍后再试！')
      }
    },
    async onSubmit(isCommit) {
      this.btnLoading = true
      let validRes
      try {
        validRes = await this.$refs.form.validate()
      // eslint-disable-next-line no-empty
      } catch (e) {}
      if (validRes !== true) {
        this.$message.warning('请完善表单')
        this.btnLoading = false
        return
      }
      let action = 'edit'
      if (this.infoId === -1) {
        // 新增
        action = 'add'
      }
      if (isCommit) {
        // 提交
        this.formData.approveStatus = '2'
      } else {
        // 暂存
        this.formData.approveStatus = '1'
      }
      try {
        const { code, msg } = await this.$api.kjtjdc.table.labInfo[action](this.formData);
        if (code === 200) {
          this.$message.success(`${isCommit?'提交':'暂存'}信息成功！`)
          this.btnLoading = false
          this.$emit('update:visible', false);
          this.$emit('reload');
        } else {
          throw msg
        }
      } catch (e) {
        this.$message.error(e)
        this.btnLoading = false
      }
    },
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
    addLine() {
      const tid = Math.random().toString(32).substring(2, 7)
      this.formData.traingInfos.push({tid})
    },
    delLine(idx) {
      this.formData.traingInfos.splice(idx, 1)
    }
  }
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 8px 0;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
.t-form__item {
  margin: 0 35px 0 0;
}
.t-row {
  margin-bottom: 20px;
}
.t-row:last-of-type {
  margin-bottom: 0;
}
.front-title {
  line-height: 32px;
  margin-right: 20px;
}
</style>
